iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

30天每天寫網站系列 第 28

Day28-用jQuery寫得出ToDoList嗎_3_id的重要性與作用

  • 分享至 

  • xImage
  •  

首先先來寫id的使用
我們要做一個隨機碼id的用意是因為,如果我們需要去對特定的label做改變我們需要能抓取到它的唯一id
我一開始是使用content去當辨別的東西,因為id不能用中文就使用了name來抓取
但是如果今天我設了兩個一樣content的List這樣就會出問題,因為它們的name相同會互相影響
所以上一篇做出了唯一的id給每一個List
那這邊要來使用這個id了

id可以用英文跟數字去組成,我的一個List有input、label跟a連結
三個部分都需要設置id,使用我們的唯一4碼來搭配使用
並不能直接全部給它貼上去我們的隨機碼,因為id必須是唯一的存在
所以我們需要幫它加一些另外的英文或數字
這邊先改改HTML

<li>
    <input type="checkbox" id="CID_HERE" onclick="complete(this)">
    <label class="CLASS_HERE" id="LID_HERE">CONTENT_HERE</label> 
    -<a href="#" id="AID_HERE"> 刪除</a>
</li>

幫input、label跟a連結各自設一個id
然後回到update函式幫它們加上東西

function update() {
    result = []
    result = $.map(todos, function (item, index) {
        return item.id;
    })
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CID_HERE", "mycheck_" + index.id);
        div = div.replace("LID_HERE", "mylabel_" + index.id);
        div = div.replace("CONTENT_HERE", index.content);
        div = div.replace("AID_HERE", "mybutton_" + index.id);
        $("#add").append(div)
    });
}

這邊我在每個id前面加上了一些英文,讓每個List之中id不會重複,但也因為我們做了唯一4碼隨機碼,所以List互相也不會有重複的id
這邊放開發者工具的程式碼給大家看
https://ithelp.ithome.com.tw/upload/images/20211012/201419911YxkBtqvtN.jpg
藍框是兩個List,每個List之中的id沒有重複,但尾巴是一樣的,因為它們是用同一個隨機碼
紅線的部分是不同的List是用不同的隨機碼,所以id也會不同

那這邊id都設好之後我們來把input要使用的complete()寫好
input的onclick需要寫成complete(this),因為我們會需要去抓取id
概念是
先抓取到id之後,去掉我們多加上的文字
然後回到todos去改掉對應List中complete的true跟false
最後對對應的label加上或刪除含有刪除樣式的CSS
程式碼如下

function complete(todo) {
    var Mid = todo.id.replace("mycheck_", "")
    todos[result.indexOf(Mid)].complete = todo.checked;
    var Lid = $("#mylabel_" + Mid);
    if (todos[result.indexOf(Mid)].complete) Lid.addClass("completed")
    else Lid.removeClass("completed")
}

這樣子去處理過後,我們就能去控制每一個List的完成與否了
https://i.imgur.com/e2lp9Oq.gif

然後我們需要對update做一個修正
在我們更新時,我們需要把List的狀態也帶上去
這邊在新增div後,判斷這個List是否完成,如果完成,就直接抓取對應的id然後去新增狀態到HTML
這邊直接放完整程式碼

function update() {
    result = []
    result = $.map(todos, function (item, index) {
        return item.id;
    })
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CID_HERE", "mycheck_" + index.id);
        div = div.replace("LID_HERE", "mylabel_" + index.id);
        div = div.replace("CONTENT_HERE", index.content);
        div = div.replace("AID_HERE", "mybutton_" + index.id);
        $("#add").append(div)
        if (index.complete) {
            $("#mylabel_"+ index.id).addClass("completed");
            $("#mycheck_"+ index.id).prop('checked','true');
        }
    });
}

因為我的判別式加在.append之後,所以是可以抓取到id的~
https://i.imgur.com/wf1CQ0k.gif

篇幅有點長,主要想把id的使用比較重點介紹
會發現我整篇文一直提到隨機碼的運用,因為它很重要

這邊一定要幫每一個List的物件去建立屬於自己的id,因為很多功能要去避免互相影響,比如這一篇說的完成後去更改樣式,亦或是下一篇會說的刪除List跟更改List內容的部分
如果使用可能重複的class名稱去抓很可能會互相影響,點擊A卻讓B也有反應
而id又必須是唯一不重複的,所以我們利用了自定義的字串+隨機碼的組合
讓同樣一個List中的id不同又有相關聯
這樣便能用jQuery去抓取"不同List要使用同樣函式的div",又能讓它們不要影響到其他的List


上一篇
Day27-用jQuery寫得出ToDoList嗎_2_搞個4碼隨機碼給id使用吧
下一篇
Day29-用jQuery寫得出ToDoList嗎_4_單機版ToDoList沒有問題!
系列文
30天每天寫網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言